import React, { Component } from 'react'
import { connect } from 'react-redux'
import { toggleDmShow } from '../../actions/dmAction'

import DoLikeComponent from '@com/dm/doLike'
import QuestionEntry from '@com/dm/questionEntry'


class OutDmSwitch extends Component {
  clickSwitch = () => {
    const { show, dispatch } = this.props
    dispatch(toggleDmShow(!show))
  }
  renderToastText() {
    const { show, questionStarToast } = this.props
    return !show && questionStarToast ? <div className="like_toast_text">{questionStarToast}</div> : null
  }
  render() {
    const { show, color_theme } = this.props

    return (
      <div>
        { this.renderToastText() }
        <div className="out_dm_other">
          <QuestionEntry/>
          <DoLikeComponent innerType="swiper"/>
        </div>
        <div className={`out_dm_switch ${show ? 'switch_on' : 'switch_off'} ${color_theme === 'red' ? 'red' : ''}`} onClick={this.clickSwitch}>
          <div className="switch">{ show ? '开' : '关' }</div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    show: state.DmState.show,
    color_theme: state.MainScreenState.info.color_theme,
    questionStarToast: state.DoLikeState.toastText
  }
}

export default connect(mapStateToProps)(OutDmSwitch)
